<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      overflow: hidden;
    }

    button {
      padding: 20px;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <!-- <button id="changeBtn">点击切换颜色</button> -->
  <!-- 白 -> 红 -> 绿 -> 篮 => 黑 -> 白 -->

  <button id="grayBtn">gray</button>
  <button id="blueBtn">blue</button>

  <script>
   /*  let body = document.body;
    let changeBtn = document.getElementById('changeBtn'); */

    /* changeBtn.onclick = function () {
      // 获取当前的背景色
      let bg = body.style.backgroundColor;
      switch(bg) {
        case 'white': 
          body.style.backgroundColor = 'red';
          break;
        case 'red': 
          body.style.backgroundColor = 'green';
          break;
        case 'green': 
          body.style.backgroundColor = 'blue';
          break;
        default: 
          body.style.backgroundColor = 'white'
      }
    } */

    /* let i = 0;
    let ary = ['white', 'red', 'green', 'rgb(219, 92, 92)', '#999']; */
    // changeBtn.onclick = function() {
    //   i++;
    //   // 如果索引累加后比数组最大的索引都要大, 我们让其从零开始即可
    //   i > ary.length - 1 ? i = 0 : null;
    //   body.style.backgroundColor = ary[i];
    // }
    /* changeBtn.onclick = function() {
      i++;
      i > ary.length - 1 ? i = 0 : null;
      body.style.backgroundColor = ary[i];
    } */

    let grayBtn = document.getElementById('grayBtn');
    let blueBtn = document.getElementById('blueBtn');
    let body = document.body;
    let i = 0;
    let colorAry = ['gray', 'blue'];
    grayBtn.onclick = function() {
      body.style.backgroundColor = colorAry[0];
    } 
    blueBtn.onclick = function() {
      body.style.backgroundColor = colorAry[1];
    }
  </script>
</body>

</html>